<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tarot</title>
<meta name="description" content="">
<meta name="keywords" content="塔罗,测试">
<link href="" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script>
	$(document).ready(function(){
		//截获对卡片的点击事件
		$("#theFool").click(function(){
			//判断卡片当前的状态
			if($("#theFool").attr("class")=="normalcard"){	
				toSelected();
			}else{
				tonormalcard();
			}
		});
	});
	//转换到选中状态的函数
	function toSelected(){
		$("#theFool").removeClass("normalcard");
		$("#theFool,#theFoolP").addClass("selected");
		setTimeout(changeSrc,1000);
	}
	//转换到正常状态的函数
	function tonormalcard(){
		$("#theFool,#theFoolP").removeClass("showed");
		$("#theFool,#theFoolP").addClass("unselected");
		setTimeout(changeSrcback,1000);
	}
	//改变图片到正面
	function changeSrc(){
		$("#theFoolP").attr("src","0.愚者.jpg");
		$("#theFool,#theFoolP").removeClass("selected");
		$("#theFool,#theFoolP").addClass("showed");
	}
	//改变图片到背面
	function changeSrcback(){
		$("#theFoolP").attr("src","背面.jpg");
		$("#theFool,#theFoolP").removeClass("unselected");
		$("#theFool,#theFoolP").addClass("normalcard");
	}
</script>
<style>
	body{
		background-color: #000000;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		top: 0;
	}
	/*正面显示时的状态*/
	.showed{
		margin: auto;
		width: 400px;
		background: black;
		transform: rotateY(90deg);
		transition: transform 2s;
	    transform: rotateY(180deg);
	}
	/*由背面到正面时的过渡*/
	.selected{
		margin: auto;
		width: 300px;
	    background: black;
	    transition: width 2s, transform 1s;
	    transform: rotateY(90deg);
	    width: 400px;
	}
	/*最外面的div*/
	.whole{
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		top: 0;
		text-align: center;
		vertical-align: center;
	}
	/*从正面到背面的过渡*/
	.unselected{
		margin: auto;
		width: 400px;
	    background: black;
	    transition: width 2s, transform 1s;
	    transform: rotateY(90deg);
	    width: 300px;
	}
	/*卡片背面呈现时的样子*/
	.normalcard{
		transition: width 2s, transform 1s;
	    transform: rotateY(0deg);
		margin: auto;
		width: 300px;
	    background: black;
	}
	/*鼠标在元素上时，播放震动动画*/
	div.normalcard:hover {
		animation: rotateS 0.5s linear 0s infinite;
	}
	/*震动动画*/
	@keyframes rotateS{
		0%   {transform: rotate(0deg);}
		33%  {transform: rotate(-5deg);}
		66%  {transform: rotate(5deg);}
		100% {transform: rotate(0deg);}
	}
</style>
</head>
<body>
<div class="whole">
	<div id="theFool" class="normalcard"><img id="theFoolP" style="width: 100%;" src="背面.jpg" alt="愚者"></div>
</div>
	
</body>
</html>